<template>
    <div style="width: 100%;">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="收结案统计">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form style="width: 100%;">
            <el-container>
                <el-form-item>
                    <el-input v-model="caseType.case_wtr" placeholder="执业人员" clearable></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="caseType.starttime"
                            type="date"
                            placeholder="收案开始日期" value-format="yyyy-MM-dd">
                    </el-date-picker>

                    <el-date-picker
                            style="margin-left: 10px"
                            v-model="caseType.endtime"
                            type="date"
                            placeholder="收案结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="List()" icon="el-icon-search">检索</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="exportss()" icon="el-icon-upload">导出</el-button>
                </el-form-item>
            </el-container>
        </el-form>
        <el-divider></el-divider>
        <h1 style="text-align:center;margin-bottom: 30px;margin-top: 50px">浅语律师事务所 (合计:{{caseData.length}}个)</h1>
        <el-table
                :data="caseData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                style="width: 100%;font-size: 18px;"
                show-summary
                :summary-method="getSummaries">
            <el-table-column
                    prop="case_no"
                    label="案号"
                    width="220px">
            </el-table-column>
            <el-table-column
                    prop="case_cause"
                    label="案由"
                    width="180px">
            </el-table-column>
            <el-table-column
                    prop="collection_time"
                    label="收案日期">
            </el-table-column>
            <el-table-column
                    prop="case_wtr"
                    label="委托人">
            </el-table-column>
            <el-table-column
                    prop="case_opposite_parties"
                    label="对方当事人">
            </el-table-column>
            <el-table-column
                    prop="case_attorney"
                    label="承办律师"
                    width="300px">
            </el-table-column>
            <el-table-column
                    prop="case_accept"
                    label="受理单位">
            </el-table-column>
            <el-table-column
                    prop="case_lawsuitobj"
                    label="诉讼标的(元)">
            </el-table-column>
            <el-table-column
                    prop="case_agencyfee"
                    label="收费(元)">
            </el-table-column>
            <el-table-column
                    prop="case_paidsal"
                    label="已付款(元)">
            </el-table-column>
            <el-table-column
                    prop="case_invoiced"
                    label="已开票(元)">
            </el-table-column>
        </el-table>
        <el-divider></el-divider>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="caseData.length"> //这是显示总共有多少数据，
        </el-pagination>
    </div>
</template>

<script>
    import  CaseLawService from '../../../model/gs/CaseLawService'
    const caseLawService=CaseLawService.getInstance();
    export default {
        name: "SettleCase",
        data(){
            return {
                caseType:{},  //查询传递对象
                caseData:[], //表格数据
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
            }
        },
        methods:{
            //查询案件数据
            List(){
                caseLawService.statisticsList(this.caseType).then((response)=>{
                    this.caseData=response.data.data
                })
            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },
            getSummaries(param) { //计算合计
                //param 是固定的对象，里面包含 columns与 data参数的对象 {columns: Array[4], data: Array[5]},包含了表格的所有的列与数据信息
                const { columns, data } = param;
                //console.log(data)
                const sums = [];
                columns.forEach((column, index) => {
                    //console.log(column)
                    //console.log(index)
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    //验证每个value值是否是数字，如果是执行if
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            //const value = Number(curr);
                            //if (!isNaN(value)) {
                            return prev + curr;
                            // } else {
                            //   return prev;
                            // }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },
            exportss(){
                caseLawService.dc(this.caseType).then((response)=>{
                    if(!response){
                        this.$message.error("下载模板文件失败");
                        return false;
                    }
                    const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob);
                    let contentDisposition = response.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    let result = patt.exec(contentDisposition);
                    let filename = decodeURI(result[1]);
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename ; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
            goBack(){
                history.back()
            }
        },
        created() {
            this.List()
        }
    }
</script>

<style scoped>

</style>
